import React from "react"
import { BarChart3, Database, Globe, Shield, Users, Zap } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

const features = [
  {
    icon: <BarChart3 className="h-8 w-8" />,
    title: "数据可视化",
    description: "强大的图表和仪表板功能，让数据一目了然"
  },
  {
    icon: <Database className="h-8 w-8" />,
    title: "数据管理",
    description: "统一管理多种数据源，支持实时同步和处理"
  },
  {
    icon: <Zap className="h-8 w-8" />,
    title: "高性能",
    description: "优化的架构设计，确保系统快速响应"
  },
  {
    icon: <Shield className="h-8 w-8" />,
    title: "安全可靠",
    description: "企业级安全保障，保护您的数据安全"
  },
  {
    icon: <Users className="h-8 w-8" />,
    title: "团队协作",
    description: "支持多用户协作，权限管理灵活便捷"
  },
  {
    icon: <Globe className="h-8 w-8" />,
    title: "云端部署",
    description: "支持云端部署，随时随地访问您的数据"
  }
]

/**
 * 产品介绍模块
 */
const SectionFeature = () => {
  return (
    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-white/50 dark:bg-gray-800/50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">强大的功能特性</h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            我们提供全面的数据解决方案，满足您的各种业务需求
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <Card
              key={index}
              className="border-0 shadow-lg hover:shadow-xl transition-shadow duration-300 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm"
            >
              <CardHeader>
                <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center text-white mb-4">
                  {feature.icon}
                </div>
                <CardTitle className="text-xl font-semibold text-gray-900 dark:text-white">{feature.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription className="text-gray-600 dark:text-gray-300">{feature.description}</CardDescription>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}

export default SectionFeature
